<template>
  <div class="video-play">

    <!-- 返回首页按钮 -->
    <span class="back">
      <strong @click="handleBack">＜</strong>
    </span>

    <!-- 视频 -->
    <video controls class="video" :poster="videoInfo?.poster" :src="videoInfo?.videoSrc">
    </video>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { defineProps, PropType } from 'vue'
import { IVideoInfo } from '../index.vue';


// 获取父组件 index.vue 中的数据
defineProps({
  videoInfo: {
    type: Object as PropType<IVideoInfo>,
  }
})

const router = useRouter()

// 给按钮绑定点击事件
const handleBack = () => {
  router.back()
}




</script>
<style lang="scss" scoped>
.video-play {
  position: sticky;
  top: 45px;
  height: 220px;
  // overflow: hidden;


  .back {
    font-size: 25px;
    position: absolute;
    transform: translate(5px);
    color: #fff;
    z-index: 2;
  }

  .video {
    width: 100%;
    background-color: black;
    height: 220px;
    object-fit: fill;
    z-index: 1;
  }

}
</style>
